<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能语音对话系统</title>
    <link rel="icon" href="/static/favicon.svg" type="image/svg+xml">
    <link rel="shortcut icon" href="/static/favicon.svg" type="image/svg+xml">
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/styles.css">
</head>
<body>
    <h1>智能语音对话系统</h1>
    <p>请允许麦克风访问权限，开始与AI对话</p>
  
    <div class="container">
        <div class="status-container">
            <div id="status" class="status">等待语音输入...</div>
            <div id="statusIndicator" class="status-indicator"></div>
            <div id="errorMsg" class="error-message" style="display:none;"></div>
            <div id="iosAudioPlayer" class="ios-audio-player" style="display:none;">
                <p class="ios-hint">iOS设备需要点击播放按钮:</p>
                <audio id="iosAudio" controls></audio>
            </div>
        </div>
      
        <div id="audioWave">
            <div class="waveform">
                <div class="wave-bar"></div>
                <div class="wave-bar"></div>
                <div class="wave-bar"></div>
                <div class="wave-bar"></div>
                <div class="wave-bar"></div>
                <div class="wave-bar"></div>
                <div class="wave-bar"></div>
                <div class="wave-bar"></div>
                <div class="wave-bar"></div>
            </div>
        </div>
      
        <div class="btn-group">
            <button id="startBtn">
                <span>启动对话</span>
            </button>
            <button id="stopBtn" disabled>
                <span>结束对话</span>
            </button>
            <button id="clearHistoryBtn">
                <span>清除历史</span>
            </button>
        </div>
      
        <div class="conversation-container">
            <div class="conversation" id="conversation">
                <h3 class="conversation-title">对话记录</h3>
                <div id="conversationContent"></div>
            </div>
          
            <div class="log" id="eventLog">
                <h3 class="log-title">系统日志</h3>
                <div id="logContent"></div>
            </div>
        </div>
    </div>

    <!-- 加载必要的库 -->
    <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.14.0/dist/ort.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@ricky0123/vad-web@0.0.22/dist/bundle.min.js"></script>
    <script src="/static/js/app.js"></script>
</body>
</html>